import React from 'react';

export const CommodityItem = (props) => {
    let spec = (props.item.spec)
        ? <small style={{ margin: '0 15px', color: 'grey' }}>{props.item.spec}</small>
        : ''
    return (
        <div className="card" style={{ border: 'transparent', display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
            <img src={props.item.image} width="50px" height="50px"></img>
            <div style={{ display: 'flex', flexDirection: 'row', flex: '1', alignItems: 'center' }}>
                <div>
                    <h5 style={{ margin: '0 15px' }}>{props.item.name}</h5>
                    {spec}
                </div>
                <span><small>&times;{props.item.quantity}</small></span>
                <span style={{ display: 'block', color: 'red', fontSize: '18px', fontWeight: 'bold', flex: '1', textAlign: 'right' }}>
                    <span style={{ fontSize: '10px' }}>￥</span>{props.item.price}
                </span>
            </div>
        </div>
    )

}

export const CommodityList = (props) => {
    let packPrice = 0
    let totalPrice = 0

    let contents = props.cart.map(item => {
        packPrice += item.packPrice;
        totalPrice += item.price * item.quantity
        return (
            <li className="list-group-item" key={props.cart.indexOf(item)}>
                <CommodityItem item={item} />
            </li>
        )
    });
    totalPrice += packPrice + props.shop.shipPrice
    return (
        <>
            <div className="card" style={{ margin: '10px 0' }}>
                <div className="card-body">
                    <h2>{props.shop.name}{(props.badge) ? props.badge : ''}</h2>
                    <ul className="list-group">
                        {contents}
                    </ul>
                </div>
            </div>

            <div style={{ textAlign: 'right' }}>
                配送费&nbsp;&nbsp;￥{props.shop.shipPrice}
            </div>
            <div style={{ textAlign: 'right' }}>
                包装费&nbsp;&nbsp;￥{packPrice}
            </div>
            <div style={{ textAlign: 'right', fontSize: '20px', color: 'red', fontWeight: 'bold' }}>
                总价&nbsp;&nbsp;￥{totalPrice}
            </div>
        </>
    )
}

export class OrderPanel extends React.Component {

    constructor(props) {
        super(props)
    }

    render() {
        return (
            <>
                <CommodityList
                    cart={this.props.cart}
                    shop={this.props.shop}
                />
                <div style={{ textAlign: 'right' }}>
                    <button
                        type="button"
                        className="btn btn-primary btn-lg"
                        style={{ minWidth: '200px', margin: '10px 0' }}
                        onClick={this.props.handleSubmit}
                    >提交订单</button>
                </div>
            </>
        )
    }

}